<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<!-- 图画-->
<section class="gallery no-padding">
    <div class="row">
        <div class="mix col-lg-3 col-md-3 col-sm-6">
            <div class="item">
                <a href="${pageContext.request.contextPath}/img/1.jpg" data-fancybox="gallery" class="image">
                    <img src="${pageContext.request.contextPath}/img/1.jpg" alt="..." class="img-fluid">
                    <div class="overlay d-flex align-items-center justify-content-center">
                        <i class="icon-search"></i>
                    </div>
                </a></div>
        </div>
        <div class="mix col-lg-3 col-md-3 col-sm-6">
            <div class="item"><a href="${pageContext.request.contextPath}/img/2.jpg" data-fancybox="gallery"
                                 class="image">
                <img src="${pageContext.request.contextPath}/img/2.jpg" alt="..." class="img-fluid">
                <div class="overlay d-flex align-items-center justify-content-center">
                    <i class="icon-search"></i>
                </div>
            </a></div>
        </div>
        <div class="mix col-lg-3 col-md-3 col-sm-6">
            <div class="item">
                <a href="${pageContext.request.contextPath}/img/3.jpg" data-fancybox="gallery" class="image">
                    <img src="${pageContext.request.contextPath}/img/3.jpg" alt="..." class="img-fluid">
                    <div class="overlay d-flex align-items-center justify-content-center">
                        <i class="icon-search"></i>
                    </div>
                </a></div>
        </div>
        <div class="mix col-lg-3 col-md-3 col-sm-6">
            <div class="item">
                <a href="${pageContext.request.contextPath}/img/4.jpg" data-fancybox="gallery" class="image">
                    <img src="${pageContext.request.contextPath}/img/4.jpg" alt="..." class="img-fluid">
                    <div class="overlay d-flex align-items-center justify-content-center">
                        <i class="icon-search"></i>
                    </div>
                </a>
            </div>
        </div>
        <div class="mix col-lg-3 col-md-3 col-sm-6">
            <div class="item">
                <a href="${pageContext.request.contextPath}/img/5.jpg" data-fancybox="gallery" class="image"><img
                        src="${pageContext.request.contextPath}/img/5.jpg" alt="..." class="img-fluid">
                    <div class="overlay d-flex align-items-center justify-content-center">
                        <i class="icon-search"></i>
                    </div>
                </a>
            </div>
        </div>
        <div class="mix col-lg-3 col-md-3 col-sm-6">
            <div class="item">
                <a href="${pageContext.request.contextPath}/img/6.jpg" data-fancybox="gallery" class="image"><img
                        src="${pageContext.request.contextPath}/img/6.jpg" alt="..." class="img-fluid">
                    <div class="overlay d-flex align-items-center justify-content-center">
                        <i class="icon-search"></i>
                    </div>
                </a>
            </div>
        </div>
        <div class="mix col-lg-3 col-md-3 col-sm-6">
            <div class="item">
                <a href="${pageContext.request.contextPath}/img/7.jpg" data-fancybox="gallery" class="image"><img
                        src="${pageContext.request.contextPath}/img/7.jpg" alt="..." class="img-fluid">
                    <div class="overlay d-flex align-items-center justify-content-center">
                        <i class="icon-search"></i>
                    </div>
                </a>
            </div>
        </div>
        <div class="mix col-lg-3 col-md-3 col-sm-6">
            <div class="item">
                <a href="${pageContext.request.contextPath}/img/8.jpg" data-fancybox="gallery" class="image"><img
                        src="${pageContext.request.contextPath}/img/8.jpg" alt="..." class="img-fluid">
                    <div class="overlay d-flex align-items-center justify-content-center">
                        <i class="icon-search"></i>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
<footer class="main-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="logo">
                    <h6 class="text-white">Bootstrap Blog</h6>
                </div>
                <div class="contact-details">
                    <p>53 Broadway, Broklyn, NY 11249</p>
                    <p>Phone: (020) 123 456 789</p>
                    <p>Email: <a href="mailto:info@company.com">Info@Company.com</a></p>
                    <ul class="social-menu">
                        <li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fa fa-behance"></i></a></li>
                        <li class="list-inline-item"><a href="#"><i class="fa fa-pinterest"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4">
                <div class="menus d-flex">
                    <ul class="list-unstyled">
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">Add Listing</a></li>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">Privacy &amp; Policy</a></li>
                    </ul>
                    <ul class="list-unstyled">
                        <li><a href="#">Our Partners</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">How It Works</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4">
                <div class="latest-posts">
                    <c:forEach items="${hotArticles}" var="hotArticle">
                        <a href="#">
                            <div class="post d-flex align-items-center">
                                <div class="image"><img src="${hotArticle.getImage()}" alt="..." class="img-fluid">
                                </div>
                                <div class="title"><strong>${hotArticle.getTitle()}</strong><span
                                        class="date last-meta">${hotArticle.getPhTime()}</span>
                                </div>
                            </div>
                        </a>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
    <div class="copyrights">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6 text-right">
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>
